<template>
  <div class="run-modal-style PostSelectRole-page" style="height:330px">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="roleFormSearch"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 角色名称 -->
        <Form-item prop="roleName" :label="$t('module.role.roleName')">
          <Input
            type="text"
            :maxlength="30"
            v-model="searchForm.roleName"
            :placeholder="$t('module.role.warning.enterRoleName')"
            
            @on-enter="search"
          />
        </Form-item>
        <!-- 角色编码 -->
        <Form-item prop="roleCode" :label="$t('module.role.roleCode')">
          <Input
            type="text"
            :maxlength="30"
            v-model="searchForm.roleCode"
            :placeholder="$t('module.role.warning.enterRoleCode')"
            
            @on-enter="search"
          />
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">  
          <RPButton optType="search"  @click="search" />
          <RPButton optType="reset"  @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="roleTable" :config="tableConfig">
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search"  @click="search" />
        <RPButton optType="reset"  @click="reset" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import { getRoleList } from "@/api/roleApi.js";
import { postSelectColumns } from "./columns.js";
import locales from "./locales.js";

export default {
  name: "postselectrole",
  mixins: [locales],
  props: {
    productId: {
      type: String,
      default() {
        return "";
      }
    },
    treeNodeId: {
      type: String,
      default() {
        return "";
      }
    },
    appId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      searchForm: {
        roleName: "",
        roleCode: ""
      }
    };
  },
  computed: {
    tableConfig() {
      const { productId, appId, treeNodeId } = this;
      return {
        loadDataFn: ({ responseProcess, param }) => {
          getRoleList(param).then(res => responseProcess(res.data));
        },
        initParam: { productId, appId, treeNodeId },
        autoFirst: true,
        columnsFn: postSelectColumns.bind(this)
      };
    }
  },
  created: function() {
    this.$emit("SetTitle", this.$t("module.role.selectRoles"));
    this.$emit("SetPageWidth", 894);
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        handle: () => {
          this.confirm();
        }
      },
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  mounted() {
    // this.search();
  },
  methods: {
    search(page = 1) {
      this.$refs["roleTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["roleFormSearch"].resetFields();
      this.search(1);
    },
    confirm() {
      let selectedRole = this.$refs["roleTable"].getSelectioned();
      this.$emit("Close", selectedRole);
    },
    getDynamicCol() {
      let dynamicCol = [];
      if (!!window.RPConfig.orgTreeCode) {
        dynamicCol.push({
          title: this.$t("module.post.orgName"),
          key: "treeNodeName",
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.treeNodeName
                }
              },
              params.row.treeNodeName
            );
          }
        });
      } else {
        dynamicCol.push({
          title: this.$t("common.describe"), // 备注 改为 描述
          key: "remark",
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.remark
                }
              },
              params.row.remark
            );
          }
        });
      }
      return dynamicCol;
    }
  }
};
</script>
<style lang="less">
// ok统一注释的样式
// .PostSelectRole-page {
//   .run-search-bar>div:last-child {
//     margin-top: 10px!important;
//   }
// }
</style>
